<template>
  <VueFlow :nodes="nodes" :edges="edges" @node-click="handleNodeClick" @node-mouse-enter="handleNodeMouseEnter"
    @node-mouse-leave="handleNodeMouseLeave" class="flow-chart-container">
    <div v-if="hoveredNode" class="node-info" ref="nodeInfo">
      {{ hoveredNodeData.data.value }}
    </div>
  </VueFlow>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, computed } from 'vue'
import type { Elements } from '@vue-flow/core'
import { VueFlow, useVueFlow, Position, MarkerType } from '@vue-flow/core'
import { flowChartData_get } from '@/api/workbench';
import { useRouter } from 'vue-router';

const router = useRouter()

const hoveredNode = ref(false)
const hoveredNodeData = ref<any>()
const nodeInfo = ref()
const nodeData = ref<any>({
  asset_owner: '',
  asset_project: '',
  asset_resource: '',
  asset_package_total: '',
  asset_non_compliance: '', // 待合规
  asset_non_registration: '', // 待登记
  asset_non_evaluation: '', // 待评价
})

const nodes = computed(() => {
  return [
    // 数据接入模块
    {
      id: 'p1-2',
      label: '前期准备',
      position: { x: 72, y: 30 },
      targetPosition: Position.Bottom,
      style: {
        width: '306px',
        height: '140px',
        backgroundColor: 'rgba(52,201,79,0.06)',
        border: '1px dashed #34C94F'
      },
    },
    {
      id: '1',
      label: '资产主体',
      draggable: false,
      position: { x: 25, y: 52 },
      targetPosition: Position.Bottom,
      class: 'enter-table-white-node',
      parentNode: 'p1-2',
      data: {
        value: `已录入主体${nodeData.value.asset_owner}个`
      },
      path: '/assetManage/Subject',
      name: 'subject'
    },
    {
      id: '2',
      label: '资产项目',
      draggable: false,
      position: { x: 159, y: 52 },
      targetPosition: Position.Bottom,
      class: 'enter-table-white-node',
      parentNode: 'p1-2',
      data: {
        value: `已录入项目${nodeData.value.asset_project}个`
      },
      path: "/assetManage/project",
      name: 'project'
    },
    {
      id: '3',
      label: '数据接入',
      draggable: false,
      position: { x: 164, y: 192 },
      targetPosition: Position.Top,
      sourcePosition: Position.Right,
      class: 'enter-table-blue-node',
      data: {
        value: `已录入资源${nodeData.value.asset_resource}个`
      },
      path: "/assetManage/resource",
      name: 'resource'
    },
    // 资产打包模块
    {
      id: '4',
      label: '资产追溯',
      draggable: false,
      position: { x: 392, y: 52 },
      targetPosition: Position.Bottom,
      class: 'enter-table-white-node',
      parentNode: 'p1-2',
      path: "/assetManage/Tracing",
      name: 'tracing'
    },
    {
      id: '5',
      label: '资产台账',
      draggable: false,
      position: { x: 526, y: 52 },
      targetPosition: Position.Bottom,
      class: 'enter-table-white-node',
      parentNode: 'p1-2',
      path: "/ledger",
      name: 'ledger'
    },
    {
      id: '6',
      label: '资产打包',
      draggable: false,
      position: { x: 531, y: 192 },
      targetPosition: Position.Left,
      sourcePosition: Position.Top,
      class: 'enter-table-blue-node',
      data: {
        value: `企业数据资产：\n${nodeData.value.asset_package_total}个资产包`
      },
      path: "/assetManage/pack",
      name: 'pack'
    },
    { // 因为只能有两个节点，设置一个隐藏的节点替代用
      id: '6-h',
      label: '资产打包',
      draggable: false,
      position: { x: 531, y: 192 },
      sourcePosition: Position.Bottom,
      class: 'enter-table-hidden-node',
    },
    // {
    //   id: '6-h2',
    //   label: '资产打包',
    //   draggable: false,
    //   position: { x: 531, y: 192 },
    //   sourcePosition: Position.Right,
    //   class: 'enter-table-hidden-node',
    // },
    {
      id: 'p7-9',
      label: '第三方机构',
      position: { x: 478, y: 255 },
      targetPosition: Position.Right,
      sourcePosition: Position.Right,
      style: {
        width: '306px',
        height: '236px',
        backgroundColor: 'rgba(255,172,56,0.06)',
        border: '1px dashed #FFAC38'
      },
    },
    {
      id: '7',
      label: '资产合规',
      draggable: false,
      position: { x: 151, y: 52 },
      targetPosition: Position.Left,
      sourcePosition: Position.Left,
      class: 'enter-table-white-node',
      parentNode: 'p7-9',
      data: {
        value: `待合规/总资产：\n${nodeData.value.asset_non_compliance || '-'}个/${nodeData.value.asset_package_total || '-'}个`
      },
      path: "/complianceRegister/Property",
      name: 'property'
    },
    {
      id: '8',
      label: '资产登记',
      draggable: false,
      position: { x: 151, y: 112 },
      targetPosition: Position.Left,
      sourcePosition: Position.Left,
      class: 'enter-table-white-node',
      parentNode: 'p7-9',
      data: {
        value: `待登记/总资产：\n${nodeData.value.asset_non_registration || '-'}个/${nodeData.value.asset_package_total || '-'}个`
      },
      path: "/complianceRegister/register",
      name: 'register'
    },
    {
      id: '9',
      label: '资产评价',
      draggable: false,
      position: { x: 151, y: 172 },
      targetPosition: Position.Left,
      sourcePosition: Position.Left,
      class: 'enter-table-white-node',
      parentNode: 'p7-9',
      data: {
        value: `待评价/总资产：\n${nodeData.value.asset_non_evaluation || '-'}个/${nodeData.value.asset_package_total || '-'}个`
      },
      path: "/dataEvaluation/report",
      name: 'report'
    },
    // 凭证管理
    {
      id: '10',
      label: '凭证管理',
      draggable: false,
      position: { x: 771, y: 192 },
      targetPosition: Position.Left,
      sourcePosition: Position.Right,
      class: 'enter-table-blue-node',
      data: {
        value: `待关联/已同步：\n${nodeData.value.credential_non_relation || '-'}个/${nodeData.value.credential_relation || '-'}个`
      },
      path: "/costAssignment/voucherManage",
      name: 'voucherManage'
    },
    // 资产成本
    {
      id: '11',
      label: '资产成本',
      draggable: false,
      position: { x: 1016, y: 192 },
      targetPosition: Position.Left,
      sourcePosition: Position.Right,
      class: 'enter-table-blue-node',
      data: {
        value: `可入表额度：${nodeData.value.ru_biao_amount_total || '-'}\n研发可支出额度：\n${nodeData.value.rd_spending_amount_total || '-'}`
      },
      path: "/costAssignment/cost",
      name: 'cost'
    },
    {
      id: '11-h',
      label: '资产成本',
      draggable: false,
      position: { x: 1016, y: 192 },
      targetPosition: Position.Top,
      sourcePosition: Position.Top,
      class: 'enter-table-hidden-node',
    },
    {
      id: '12',
      label: '计算账套',
      draggable: false,
      position: { x: 1016, y: 82 },
      targetPosition: Position.Bottom,
      sourcePosition: Position.Bottom,
      class: 'enter-table-white-node',
      path: "/costAssignment/costSet",
      name: 'costSet'
    },
    // 资产入表
    {
      id: '13',
      label: '资产入表',
      draggable: false,
      position: { x: 1202, y: 192 },
      targetPosition: Position.Bottom,
      sourcePosition: Position.Bottom,
      class: 'enter-table-blue-node',
      data: {
        value: `待入表/已入表：\n${nodeData.value.asset_non_confirm_ru_biao || '-'}个/${nodeData.value.asset_confirm_ru_biao || '-'}个`
      },
      path: "/costAssignment/enterTable",
      name: 'enterTable'
    },
    {
      id: '13-h1',
      label: '资产入表',
      draggable: false,
      position: { x: 1202, y: 192 },
      sourcePosition: Position.Top,
      class: 'enter-table-hidden-node',
    },
    {
      id: '14',
      label: '资产摊销',
      draggable: false,
      position: { x: 1360, y: 113 },
      targetPosition: Position.Left,
      sourcePosition: Position.Left,
      class: 'enter-table-blue-node',
      data: {
        value: `已摊销资产：${nodeData.value.already_amortize_asset || '-'}个`
      },
      path: "/followMetering/amortize",
      name: 'amortize'
    },
    {
      id: '15',
      label: '资产减值',
      draggable: false,
      position: { x: 1360, y: 192 },
      targetPosition: Position.Left,
      sourcePosition: Position.Left,
      class: 'enter-table-blue-node',
      data: {
        value: `已减值资产：${nodeData.value.already_decrease_asset || '-'}个`
      },
      path: "/followMetering/impairment",
      name: 'impairment'
    },
    {
      id: '16',
      label: '资产披露',
      draggable: false,
      position: { x: 1360, y: 271 },
      targetPosition: Position.Left,
      sourcePosition: Position.Left,
      class: 'enter-table-blue-node',
      path: "/statements/list",
      name: 'statementsList'
    }
  ]
})

const edges = ref([
  {
    id: 'e1-3',
    source: '1',
    target: '3',
    type: 'step',
    // style: { stroke: '#A3B0CC' },
    // if a node has multiple handles of the same type,
    // you should specify which handle to use by id
    // sourceHandle: null,
    // targetHandle: null,
    // animated: true
    markerEnd: MarkerType.ArrowClosed,
  },
  {
    id: 'e2-3',
    source: '2',
    target: '3',
    type: 'step',
    // style: { stroke: '#A3B0CC' },
    // sourceHandle: null,
    // targetHandle: null,
    // animated: true
    markerEnd: MarkerType.ArrowClosed,
  },
  {
    id: 'e3-6',
    source: '3',
    target: '6',
    type: 'step',
    // style: { stroke: '#A3B0CC' },
    // sourceHandle: null,
    // targetHandle: null,
    // animated: true
    markerEnd: MarkerType.ArrowClosed,
  },
  // {
  //   id: 'e6-10',
  //   source: '6',
  //   target: '10',
  //   type: 'step',
  //   // style: { stroke: '#A3B0CC' },
  //   // sourceHandle: null,
  //   // targetHandle: null,
  //   // animated: true
  //   markerEnd: MarkerType.ArrowClosed,
  // },
  // {
  //   id: 'e10-11',
  //   source: '10',
  //   target: '11',
  //   type: 'step',
  //   // style: { stroke: '#A3B0CC' },
  //   // sourceHandle: null,
  //   // targetHandle: null,
  //   // animated: true
  //   markerEnd: MarkerType.ArrowClosed,
  // },
  {
    id: 'e3-15',
    source: '3',
    target: '15',
    type: 'step',
    // style: { stroke: '#A3B0CC' },
    // sourceHandle: null,
    // targetHandle: null,
    // animated: true
    markerEnd: MarkerType.ArrowClosed,
  },
  {
    id: 'e6-4',
    source: '6',
    target: '4',
    type: 'step',
    style: { stroke: '#A3B0CC' },
    sourceHandle: null,
    targetHandle: null,
    animated: true,
    markerEnd: MarkerType.ArrowClosed,
  },
  {
    id: 'e6-5',
    source: '6',
    target: '5',
    type: 'step',
    style: { stroke: '#A3B0CC' },
    sourceHandle: null,
    targetHandle: null,
    animated: true,
    markerEnd: MarkerType.ArrowClosed,
  },
  {
    id: 'e6-h-7',
    source: '6-h',
    target: '7',
    type: 'step',
    style: { stroke: '#A3B0CC' },
    sourceHandle: null,
    targetHandle: null,
    animated: true,
    markerEnd: MarkerType.ArrowClosed,
  },
  {
    id: 'e6-h-8',
    source: '6-h',
    target: '8',
    type: 'step',
    style: { stroke: '#A3B0CC' },
    sourceHandle: null,
    targetHandle: null,
    animated: true,
    markerEnd: MarkerType.ArrowClosed,
  },
  {
    id: 'e6-h-9',
    source: '6-h',
    target: '9',
    type: 'step',
    style: { stroke: '#A3B0CC' },
    sourceHandle: null,
    targetHandle: null,
    animated: true,
    markerEnd: MarkerType.ArrowClosed,
  },
  // {
  //   id:'e6-h2-10',
  //   source: '6-h2',
  //   target: '10',
  //   type: 'step',
  //   style: { stroke: '#A3B0CC' },
  //   sourceHandle: null,
  //   targetHandle: null,
  //   animated: true
  // },
  // {
  //   id:'e10-11',
  //   source: '10',
  //   target: '11',
  //   type: 'step',
  //   style: { stroke: '#A3B0CC' },
  //   sourceHandle: null,
  //   targetHandle: null,
  //   animated: true
  // },
  {
    id: 'e12-11h',
    source: '12',
    target: '11-h',
    // type: 'step',
    // style: { stroke: '#A3B0CC' },
    // sourceHandle: null,
    // targetHandle: null,
    // animated: true,
    markerEnd: MarkerType.ArrowClosed,
  },
  {
    id: 'ep7-9-13',
    source: 'p7-9',
    target: '13',
    type: 'step',
    style: { stroke: '#A3B0CC' },
    sourceHandle: null,
    targetHandle: null,
    animated: true,
    markerEnd: MarkerType.ArrowClosed,
  },
  {
    id: 'e13-h1-14',
    source: '13-h1',
    target: '14',
    type: 'step',
    style: { stroke: '#A3B0CC' },
    sourceHandle: null,
    targetHandle: null,
    animated: true,
    markerEnd: MarkerType.ArrowClosed,
  },
  {
    id: 'e13-16',
    source: '13',
    target: '16',
    type: 'step',
    style: { stroke: '#A3B0CC' },
    sourceHandle: null,
    targetHandle: null,
    animated: true,
    markerEnd: MarkerType.ArrowClosed,
  },
])

const {
  nodesDraggable,
  nodesConnectable,
  elementsSelectable,
  zoomOnScroll,
  zoomOnDoubleClick,
  zoomOnPinch,
  panOnScroll,
  panOnScrollMode,
  panOnDrag,
  onConnect,
  onNodeDragStop,
  onPaneClick,
  onPaneScroll,
  onPaneContextMenu,
  onNodeDragStart,
  onMoveEnd,
  addEdges,
  updateNode
} = useVueFlow()

onMounted(() => {
  nodesDraggable.value = false
  nodesConnectable.value = false
  // elementsSelectable.value = false
  zoomOnScroll.value = false
  zoomOnDoubleClick.value = false
  zoomOnPinch.value = false
  panOnScroll.value = false
  panOnDrag.value = false

  getNodeData()
})

/**
 * @method 获取节点展示数据
 */
const getNodeData = () => {
  flowChartData_get().then((res: any) => {
    if (res.code == 200) {
      nodeData.value = res.data
    }
  })
}

/**
 * @method 点击节点跳转页面
 * @param $event 
 */
const handleNodeClick = ($event: any) => {
  console.log("1111")
  // console.log('click', $event)
  router.push({ name: $event.node.name })
}

/**
 * @method 鼠标移入展示数据
 * @param $event 
 */
const handleNodeMouseEnter = ($event: any) => {
  // console.log('mouseenter', $event)
  if ($event.node.id
    && $event.node.id !== 'p1-2'
    && $event.node.id !== 'p7-9'
    && $event.node.id !== '4'
    && $event.node.id !== '5'
    && $event.node.id !== '16'
    && $event.node.id !== '12') {
    hoveredNode.value = true
    hoveredNodeData.value = $event.node
    nextTick(() => {
      nodeInfo.value.style.left = `${$event.node.computedPosition.x + 50}px`;
      nodeInfo.value.style.top = `${$event.node.computedPosition.y + 50}px`;
    })
  }
}

/**
 * @method 鼠标移出
 * @param $event 
 */
const handleNodeMouseLeave = ($event: any) => {
  // console.log('mouseleave', $event)
  hoveredNode.value = false
}
</script>

<style lang="less" scoped>
.flow-chart-container {
  position: relative;
  width: 100%;
  height: 550px;
  background: #FFFFFF;
  border-radius: 8px;

  ::v-deep(.vue-flow__viewport) {
    overflow: auto;
    
    .vue-flow__handle {
      width: 0px;
      height: 0px;
      min-width: 0px;
      min-height: 0px;
      border: 0px;
    }
    .vue-flow__pane {

      .vue-flow__transformationpane {

        .vue-flow__nodes {

          .vue-flow__node {
            width: 122px;
            height: 48px;
            box-shadow: 0px 2px 8px 0px rgba(147, 179, 252, 0.3);
            border-radius: 8px;
            padding: 0;
            line-height: 46px;
            color: #465A80;
            box-sizing: border-box;
            border: none;

            &.enter-table-white-node {
              background-color: #FFFFFF;
            }

            &.enter-table-blue-node {
              background: linear-gradient(180deg, #1A66FF 0%, #6AA1FF 97%);
              color: #FFFFFF;
            }

            &.enter-table-hidden-node {
              background: linear-gradient(180deg, #1A66FF 0%, #6AA1FF 97%);
              color: #FFFFFF;
              visibility: hidden !important;
            }
          }
        }
      }
    }
  }

  ::v-deep(.node-info) {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    min-height: 48px;
    font-size: 14px;
    line-height: 28px;
    background-color: #E5EFFE;
    border-radius: 24px;
    padding: 8px;
    box-sizing: border-box;
    z-index: 99;
    text-align: center;
    color: #2C6AFA;
    white-space: pre-wrap;
  }
}
</style>